<template>
    <div class="page-help">
        <van-nav-bar class="help-tilte" left-arrow :fixed="true" :title="$t('m.Howtotakegoodphotos')" @click-left="$router.back(-1)">
        </van-nav-bar>
        <div style="padding: 23px;"></div>
        <div class="terms">
            <div class="terms-list">
                <p style="padding-left: 4%">{{$t('m.Listingswithbetter')}}</p>
            </div>
            <div class="terms-list">
                <div class="h3">{{$t('m.Clearphotos')}}</div>
                <div class="photo-box">
                    <div class="photo-list left">
                        <img src="../../static/img/images/take-photo1.jpg" />
                        <div class="yes-icon"><i class="icon"></i></div>
                    </div>
                    <div class="photo-list right">
                        <img src="../../static/img/images/take-photo2.jpg" />
                        <div class="yes-icon"><i class="icon"></i></div>
                    </div>
                </div>
            </div>
            <div class="terms-list">
                <div class="h3">{{$t('m.Useaplainuncluttered')}}</div>
                <div class="photo-box">
                    <div class="photo-list left">
                        <img src="../../static/img/images/take-photo3.jpg" />
                        <div class="yes-icon"><i class="icon"></i></div>
                    </div>
                    <div class="photo-list right">
                        <img src="../../static/img/images/take-photo4.jpg" />
                        <div class="yes-icon"><i class="icon"></i></div>
                    </div>
                </div>
            </div>
            <div class="terms-list">
                <div class="h3">{{$t('m.Showtheitemfromdifferent')}}</div>
                <div class="photo-box">
                    <div class="photo-list left">
                        <img src="../../static/img/images/take-photo5.jpg" />
                    </div>
                    <div class="photo-list right">
                        <img src="../../static/img/images/take-photo6.jpg" />
                    </div>
                </div>
            </div>
            <div class="terms-list">
                <div class="h3">{{$t('m.Turnofftheflash')}}</div>
                <div class="photo-box">
                    <div class="photo-list left">
                        <img src="../../static/img/images/take-photo7.jpg" />
                    </div>
                    <div class="photo-list right">
                        <img src="../../static/img/images/take-photo8.jpg" />
                    </div>
                </div>
            </div>
            <div class="terms-list">
                <div class="h3">{{$t('m.Displaytheitem')}}</div>
                <div class="photo-box">
                    <div class="photo-list left">
                        <img src="../../static/img/images/take-photo9.jpg" />
                    </div>
                    <div class="photo-list right">
                        <img src="../../static/img/images/take-photo10.jpg" />
                    </div>
                </div>
            </div>
            <div v-for="(item, index) in dataJson.child" class="terms-list">
                <div class="h3">{{item.title}}</div>
                <p >{{item.text}}</p>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'HowTakePhotos',
        data() {
            return {};
        },
        computed: {
            dataJson() {
                if (this.$store.state.store.localLang == 'MM') {
                    return {
                        "title" : "",
                        "child" : [
                            {
                                "title" : "အျပစ္အနာအဆာမ်ားကို မဖုံးအုပ္ပါႏွင့္၊",
                                "text" : "မည့္သည့္အျပစ္အနာမဆို(ေဟာင္းႏြမ္းျခင္း၊စုတ္ၿပဲျခင္း) တို႔ကို ဖုံးကြယ္ျခင္း မျပဳပါႏွင့္။ဝယ္သူအေနျဖင့္ ကုန္ပစၥည္းတို႔ကို မဝယ္ယူခင္ ေရာင္းမွားဝယ္မွား မျဖစ္ေအာင္ အေျခအေနမွန္ကို သိသင့္သည္။"
                            },
                            {
                                "title" : "ဖိနပ္ေရာင္းခ်ရာတြက္ မတူညီေသာ ရႈေထာင့္မွေန၍ ရိုက္ကူးပါ။",
                                "text" : "၀ယ္သူစိတ္တိုင္းက်ေစရန္ဖိနပ္၏အတြင္းအျပင္၊ အေရွ႕အေနာက၊္ အေနာက္မ်က္ႏွာျပင္ကို ဓါတ္ပုံ႐ိုက္ပါ။"
                            },
                            {
                                "title" : "လက္ကိုင္အိတ္ေရာင္းခ်ရာတြင္ မတူညီေသာ ရႈေထာင့္မွေန၍ ရိုက္ကူးပါ။",
                                "text" : "လက္ကိုင္အိတ္ေရာင္းခ်ရာတြင္ အိတ္၏  အတြင္းအျပင္၊ အေရွ႕အေနာက၊္ အေနာက္မ်က္ႏွာျပင္၊ အတြင္းသားခ်ဳပ္ပုံလိုင္နင္၊ေဈးႏႈန္းကဒ္ျပား တို႔ကို ဝယ္သူ စိတ္ေက်နပ္မႈရွိေစရန္ အျပည့္အစုံ ႐ိုက္ကူးသည္။"
                            },
                            {
                                "title" : "အမွတ္တံဆိပ္ႏွင့္ ေဈးႏႈန္းကဒ္ျပားတို႔ကို ဓါတ္ပုံ႐ိုက္ျခင္း၊",
                                "text" : "အ၀တ္အစားမ်ားကို ဓါတ္ပံုရိုက္ကူးရာတြင္ အလြယ္တကူဖြင့္ေဖာက္ရန္ မလြယ္ကူေသာ အေၿခအေန ၿဖစ္ပါက အဆုိပါ အေၿခအေနအတိုင္းပင္ ဓါတ္ပံုရိုက္ကူးပါ။"
                            },
                            {
                                "title" : "မူရင္း Company ဘက္မွ ေထာက္ပံ့ေပးေသာ ရယူထားေသာ ဓါတ္ပုံမ်ားကိုကုန္ပစၥည္းအသစ္မ်ားအတြက္ သာ အသုံးျပဳရပါမည္။",
                                "text" : "အဆိုပါ ဓါတ္ပုံမ်ားကို အသုံးျပဳၿပီးေသာ ပစၥည္းမ်ားေရာင္းခ်ရာတြင္ အသုံးျပဳ၍ မရပါ။ ကတ္တေလာက္ ပုံမ်ားကို အသုံးျပဳမည္ဆိုပါက သုံးႏိုင္သည္။ ႐ုပ္ရွင္၊ စာအုပ္၊ သီခ်င္း၊ ဗီဒီယို၊ ဂိမ္း အတြက္ မူရင္း Company ဘက္မွ ေထာက္ပံ့ေပးေသာ ရယူထားေသာ ဓါတ္ပုံမ်ားကို အသုံးျပဳႏိုင္သည္။"
                            },
                            {
                                "title" : "စာသားႏွင့္ အျခားေသာ အလွအပ ဒီဇိုင္းမ်ား ထည့္သြင္းျခင္းမၿပဳပါႏွင့္",
                                "text" : "စာသားႏွင့္ အျခားေသာ အလွအပ ဒီဇိုင္းမ်ား ထည့္သြင္းျခင္း မျပဳလုပ္ပါႏွင့္။ အခမဲ့ ပို႔ေပးသည္၊ သေဘၤာႏွင့္တင္သြင္းေသာ ကုန္က်စရိတ္ မရွိျခင္း၊ ေရာင္းခ်သူ၏ လိုဂိုအမွတ္တံဆိပ္ အစရွိသည္တို႔ကို ထည့္သြင္းႏိုင္သည္။ Tolymoly Website၊ Application ၏ ေၾကာ္ျငာတင္ျခင္းေခါင္းစဥ္၊ အေသးစိတ္ အခ်က္အလက္မ်ားတြင္သာ သင့္ကုန္ပစၥည္း၏ အေသးစိတ္အခ်က္အလက္မ်ားကို ျပည့္စုံစြာ ေဖာ္ျပပါ။"
                            }

                        ]
                    }
                } else if (this.$store.state.store.localLang == 'MMU') {
                    return {
                        "title" : "",
                        "child" : [
                            {
                                "title" : "အပြစ်အနာအဆာများကို မဖုံးအုပ်ပါနှင့်၊",
                                "text" : "မည့်သည့်အပြစ်အနာမဆို(ဟောင်းနွမ်းခြင်း၊စုတ်ပြဲခြင်း) တို့ကို ဖုံးကွယ်ခြင်း မပြုပါနှင့်။ဝယ်သူအနေဖြင့် ကုန်ပစ္စည်းတို့ကို မဝယ်ယူခင် ရောင်းမှားဝယ်မှား မဖြစ်အောင် အခြေအနေမှန်ကို သိသင့်သည်။"
                            },
                            {
                                "title" : "ဖိနပ်ရောင်းချရာတွက် မတူညီသော ရှုထောင့်မှနေ၍ ရိုက်ကူးပါ။",
                                "text" : "ဝယ်သူစိတ်တိုင်းကျစေရန်ဖိနပ်၏အတွင်းအပြင်၊ အရှေ့အနောက၊် အနောက်မျက်နှာပြင်ကို ဓါတ်ပုံရိုက်ပါ။"
                            },
                            {
                                "title" : "လက်ကိုင်အိတ်ရောင်းချရာတွင် မတူညီသော ရှုထောင့်မှနေ၍ ရိုက်ကူးပါ။",
                                "text" : "လက်ကိုင်အိတ်ရောင်းချရာတွင် အိတ်၏  အတွင်းအပြင်၊ အရှေ့အနောက၊် အနောက်မျက်နှာပြင်၊ အတွင်းသားချုပ်ပုံလိုင်နင်၊ဈေးနှုန်းကဒ်ပြား တို့ကို ဝယ်သူ စိတ်ကျေနပ်မှုရှိစေရန် အပြည့်အစုံ ရိုက်ကူးသည်။"
                            },
                            {
                                "title" : "အမှတ်တံဆိပ်နှင့် ဈေးနှုန်းကဒ်ပြားတို့ကို ဓါတ်ပုံရိုက်ခြင်း၊",
                                "text" : "အဝတ်အစားများကို ဓါတ်ပုံရိုက်ကူးရာတွင် အလွယ်တကူဖွင့်ဖောက်ရန် မလွယ်ကူသော အခြေအနေ ဖြစ်ပါက အဆိုပါ အခြေအနေအတိုင်းပင် ဓါတ်ပုံရိုက်ကူးပါ။"
                            },
                            {
                                "title" : "မူရင်း Company ဘက်မှ ထောက်ပံ့ပေးသော ရယူထားသော ဓါတ်ပုံများကိုကုန်ပစ္စည်းအသစ်များအတွက် သာ အသုံးပြုရပါမည်။",
                                "text" : "အဆိုပါ ဓါတ်ပုံများကို အသုံးပြုပြီးသော ပစ္စည်းများရောင်းချရာတွင် အသုံးပြု၍ မရပါ။ ကတ်တလောက် ပုံများကို အသုံးပြုမည်ဆိုပါက သုံးနိုင်သည်။ ရုပ်ရှင်၊ စာအုပ်၊ သီချင်း၊ ဗီဒီယို၊ ဂိမ်း အတွက် မူရင်း Company ဘက်မှ ထောက်ပံ့ပေးသော ရယူထားသော ဓါတ်ပုံများကို အသုံးပြုနိုင်သည်။"
                            },
                            {
                                "title" : "စာသားနှင့် အခြားသော အလှအပ ဒီဇိုင်းများ ထည့်သွင်းခြင်းမပြုပါနှင့်",
                                "text" : "စာသားနှင့် အခြားသော အလှအပ ဒီဇိုင်းများ ထည့်သွင်းခြင်း မပြုလုပ်ပါနှင့်။ အခမဲ့ ပို့ပေးသည်၊ သင်္ဘောနှင့်တင်သွင်းသော ကုန်ကျစရိတ် မရှိခြင်း၊ ရောင်းချသူ၏ လိုဂိုအမှတ်တံဆိပ် အစရှိသည်တို့ကို ထည့်သွင်းနိုင်သည်။ Tolymoly Website၊ Application ၏ ကြော်ငြာတင်ခြင်းခေါင်းစဉ်၊ အသေးစိတ် အချက်အလက်များတွင်သာ သင့်ကုန်ပစ္စည်း၏ အသေးစိတ်အချက်အလက်များကို ပြည့်စုံစွာ ဖော်ပြပါ။"
                            }

                        ]
                    }
                } else {
                    return  {
                        "title" : "",
                        "child" : [
                            {
                                "title" : "Don't hide wear and tear",
                                "text" : "Show any wear, tear, blemishes, or defects so buyers know what to expect when they buy your item"
                            },
                            {
                                "title" : "Shoot shoes from different angles",
                                "text" : "Buyers want to see the front, top, sides, and bottom of shoes."
                            },
                            {
                                "title" : "Display handbags inside and out",
                                "text" : "Savvy handbag shoppers want to see the interior, exterior, front and bottom of your bag, including its lining and tags."
                            },
                            {
                                "title" : "Include the tags and labels",
                                "text" : "Photograph labels and tags. If the clothing item is still in its box, take shots of that too."
                            },
                            {
                                "title" : "Use stock photos only for brand-new items",
                                "text" : "Stock photos cannot be used for pre-owned items. Catalog images are acceptable, but not as the primary photo for pre-owned items except those in the Books, Movies, Music, or Video Game categories."
                            },
                            {
                                "title" : "Don't add text or artwork",
                                "text" : "No text or artwork, like \"Free Shipping\" or seller logos, may be added to photos. Use the title and description box to include details of your item."
                            }

                        ]
                    }
                }
            },
        }
    }

</script>
<style>
    .page-help .van-nav-bar{
        background-color: #FF9900;
        color: #fff;
    }
    .page-help .van-nav-bar .van-icon{
        color: #fff;
        margin-right: 15px;
        font-size: 18px;
    }
    .page-help .van-list__loading{
        width: 100%;
        /*border-top: 1px solid #F2F2F2;*/
    }
    .terms p {
        margin: 0;
    }
</style>
<style scoped>
    /*.terms{*/
        /*width:92%;*/
        /*margin:0 auto;*/
        /*padding: 20px 0;*/
    /*}*/
    /*.terms .h1{*/
        /*text-align:left;*/
        /*font-size: 1.2em!important;*/
        /*padding: 0.5em 0;*/
        /*margin: 0;*/
    /*}*/
    /*.terms .h3{*/
        /*!*font-weight: bold;*!*/
        /*color: #000;*/
        /*padding: 0.5em 0;*/
        /*margin: 0;*/
    /*}*/
    /*.terms p{*/
        /*color: rgb(81, 81, 81);*/
    /*}*/
    .terms{
        width:100%;
        margin:0 auto;
        padding: 20px 0;
    }
    .terms h1{
        text-align:center;
        font-size: 1.2em!important;
        padding: 0.5em 0;
    }
    .terms .h3{
        /*font-weight: bold;*/
        color: #000;
        padding: 0.5em 4% 0.5em 30px;
        position: relative;
    }
    .terms ul{
        margin: 0 4% 0 30px;
    }
    .terms .h3:before {
        content: '';
        position: absolute;
        top: 0.8em;
        left: 15px;
        width: 8px;
        height: 8px;
        /*margin-top: -4px;*/
        margin-left: -4px;
        background: #000000;
        border-radius: 50%;
    }
    .terms .photo-box{
        margin: 0 4%;
    }
    .terms p{
        color: rgb(81, 81, 81);
        padding: 0 4% 0 30px;
    }
    .terms li{list-style-type: none}
    .terms-list{
        margin-bottom: 20px;
    }
    .ul-title{
        margin: 10px 0;
    }
    .terms li.ul-li{
        list-style-type: disc;
        margin-left: 10%;
    }
    .terms p .is-link{
        color: #0e6c9c;
    }
    .list-box{
        padding-left: 4%;
    }
    .list-box p{
        /*word-wrap : break-word ;*/
        /*word-break:break-all;*/
    }
    .photo-box{
        display: flex;
    }
    .photo-list{
        position: relative;
        flex: 1;
    }
    .photo-list.left{
        margin-right: 6%;
    }
    .photo-list img {
        display: block;
        width: 100%;
    }
    .left .yes-icon {
        position: absolute;
        right: 5px;
        bottom: 5px;
        width: 30px;
        height: 30px;
        background: #00CC33;
        border-radius: 50%;
    }
    .left .yes-icon .icon{
        position: relative;
        width: 100%;
        height: 100%;
        display: block;
    }
    .left .yes-icon .icon:before{
        content: '';
        position: absolute;
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
        width: 12px;
        height: 6px;
        transform: rotate(135deg);
        top: 50%;
        left: 50%;
        margin-top: -6px;
        margin-left: -7px;

    }
    .right .yes-icon {
        position: absolute;
        right: 5px;
        bottom: 5px;
        width: 30px;
        height: 30px;
        background: #DB3743;
        border-radius: 50%;
    }
    .right .yes-icon .icon{
        position: relative;
        width: 100%;
        height: 100%;
        display: block;
    }
    .right .yes-icon .icon:before{
        content: '';
        position: absolute;
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
        width: 6px;
        height: 6px;
        transform: rotate(135deg);
        top: 50%;
        left: 50%;
        margin-top: -9px;
        margin-left: -5px;

    }.right .yes-icon .icon:after{
         content: '';
         position: absolute;
         border-top: 2px solid #fff;
         border-right: 2px solid #fff;
         width: 6px;
         height: 6px;
         transform: rotate(-45deg);
         top: 50%;
         left: 50%;
         margin-top: -1px;
         margin-left: -5px;

     }

</style>
